<template>
	<view class="pad-16r bg-white">
		<view class="question">
			<view class="question-title">{{surveyQuestion.name||''}}</view>
			<view class="question-subtitle"> {{surveyQuestion.describe||''}}</view>
			<view class="question-main">
				<!-- 	<view>
					<view v-for="(item,index) in questionList" :key="index">
						<view class="question-main-item-title"> {{(index+1) + "、" + item.name }}</view>
						<view class="question-main-item-content" style="color: #000000;padding: 20rpx;">
							{{item.answer||'未回答'}}
						</view>
					</view>
				</view> -->

				<view>
					<view v-for="(item, index) in questionList" :key="index" class="question-main-item">
						<view class="question-main-item-title">
							<text v-if="item.required" style="color: red;margin: 0 12upx 0 -12upx;">*</text>
							{{(index+1) + "、" + item.name }}
						</view>
						<u-radio-group>
							<u-radio v-for="(child, i) in item.child" :key="i" :name="child.option" class="radio">
								<view>
									{{child.option}}
								</view>
							</u-radio>
						</u-radio-group>

						<view class="question-main-item-content">
							<view v-if="item.type==='input'">
								<u-input v-model="formInfo[item.questionId]" trim placeholder="请填写" />
							</view>
							<!-- 日期选择 -->
							<view v-if="item.type==='calendar'" class="calendar-style"
								:style="{color:formInfo[item.questionId]?'':'#c0c4cc',paddingLeft:formInfo[item.questionId]?'10rpx':'20rpx'}">
								<!-- #ifdef MP-ALIPAY -->
								<view @click="toShowMyPicker(item.questionId)">
									<text>{{ formInfo[item.questionId]||'请选择日期' }}</text>
								</view>
								<!-- #endif -->
								<!-- #ifndef MP-ALIPAY -->
								<view @click="toShowPicker(item.questionId)">
									<text>{{ formInfo[item.questionId]||'请选择日期' }}</text>
								</view>
								<!-- #endif -->
							</view>
							<checkbox-group class="opts" v-else-if="item.type==='checkbox'"
								@change="onChange($event,item.questionId)">
								<label v-for="(cItem, i) in item.value" :key='i' style="flex-shrink: 0;">
									<checkbox :value="cItem" :checked="false" /><text>{{cItem}}</text>
								</label>
							</checkbox-group>

							<radio-group class="opts" v-if="item.type===1" @change="onChange($event,item.questionId)">
								<!-- <label v-for="(cItem, i) in item.child" :key='i' style="flex-shrink: 0;">
									<radio :value="cItem" :checked="false" /><text>{{cItem}}</text>
								</label> -->

							</radio-group>
							<!-- #ifndef MP-ALIPAY -->
							<u-picker v-model="showDate" mode="time" @confirm='confirm'></u-picker>
							<!-- #endif -->
						</view>
					</view>
					<view class="question-main-user" v-show="questionList.length">
						<view class="card-row"><label>承诺人姓名：</label>{{userInfo.patName}}</view>
						<view class="card-row"><label>承诺人性别：</label>{{userInfo.sex == 1 ? '女' : '男'}}</view>
						<view class="card-row">
							<label>身&nbsp;份&nbsp;证&nbsp;号：</label>
							<input type="text" v-model="userForm.idCard" placeholder="请填写身份证号" maxlength="18"
								placeholder-style="font-size:26rpx" />
						</view>
						<view class="card-row">
							<label>本&nbsp;人&nbsp;电&nbsp;话：</label>
							<input type="number" v-model="userForm.phone" maxlength="11" placeholder="请填写电话号码"
								placeholder-style="font-size:26rpx" />
						</view>
					</view>
					<ButtonVue content="提交" v-if="surveyQuestion.surveyAnswerStatus!=1" @click="onSubmit">
					</ButtonVue>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		surveyQuestionSelect
	} from '../../../api/surveyQuestion';
	import ButtonVue from '../../../components/Button/Button.vue';
	import dayjs from 'dayjs'
	export default {
		components: {
			ButtonVue
		},
		data() {
			return {
				type: 2,
				showDate: false,
				clickId: '',
				question: '',
				questionList: [],
				formInfo: {},
				userForm: {
					idCard: '',
					phone: ''
				},
				defaultDate: '',
				surveyQuestion: "",
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},

		onLoad(opt) {
			this.surveyQuestion = JSON.parse(opt.item)
			console.log(this.surveyQuestion)
			this.initData()
		},
		methods: {
			initData() {
				// 问题类型：1-单选 2-多选 3-评分 4-文本 5-文件 6-日期
				surveyQuestionSelect({
					surveyId: this.surveyQuestion.id,
					orderBy: "sort,sqo_sort"
				}).then(res => {
					console.log(res)
					let map = new Map();
					res.forEach(item => {
						map.set(item.id, item)
					})
					console.log(map)
					let list = []
					map.forEach((v, k) => {
						v.child = v.child || []
						res.forEach(item => {
							if (k == item.id) {
								v.child.push({
									...item
								})
							}
						})
						list.push(v);
					})
					console.log(list)
					this.questionList = list

				})
				// this.question = {
				// 	title: data.title || '',
				// 	subtitle: data.subtitle || '',
				// 	paperId: data.paperId || '',
				// 	status: data.whetherCompleted === '0' ? true : false
				// }
				// // if (this.question.status) return uni.navigateBack(1)
				// let res = data.hospitalQuestionList || []
				// res.forEach((item, i) => {
				// 	if ((!this.question.status) && item.questionId) {
				// 		this.formInfo[item.questionId] = ''
				// 	}
				// 	item.pageKey = 'question' + i
				// 	if (item.questionType === 'checkbox' || item.questionType === 'radio') {
				// 		item.value = item.value.split('|')
				// 	}
				// })
				// this.questionList = res
			},
			confirm(val) {
				this.formInfo[this.clickId] = `${e.year}-${e.month}-${e.day}`
			},
			onChange(val, id) {
				this.formInfo[id] = val.detail.value
			},
			onSubmit() {
				let flag = flag,
					list = []
				this.questionList.forEach(item => {
					if (!this.formInfo[item.questionId]) {
						flag = true
					} else {
						if (item.questionType === 'checkbox') {
							let str = ''
							this.formInfo[item.questionId].forEach(cItem => {
								str += cItem + ','
							})
							list.push({
								questionId: item.questionId,
								answer: str
							})
						} else {
							list.push({
								questionId: item.questionId,
								answer: this.formInfo[item.questionId]
							})
						}
					}
				})
				if (flag) {
					this.$u.toast('请填完善调查表信息')
					return
				}
				for (let key in this.userForm) {
					if (!this.userForm[key]) {
						flag = true
					}
				}
				if (flag) {
					this.$u.toast('请填完善承诺人信息')
					return
				}
				let params = {
					name: this.userInfo.name,
					sex: this.userInfo.sex,
					identityCard: this.userForm.idCard,
					telephone: this.userForm.phone,
					paperId: this.question.paperId,
					patientId: this.userInfo.patId,
					problemAnswerList: list
				}
				poQuestion(params).then(data => {
					this.$u.toast('提交成功')
					uni.navigateBack(1)
					this.initData()
				}).catch(e => {})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100%;
	}

	.question {
		// height: calc(100% - 50px);
		height: 100%;
		padding: 30rpx;
		overflow: scroll;
		background-color: $uni-bg-color;
		border-radius: 8upx;

		.u-radio {
			width: 50% !important;
			line-height: 30px;
		}

		&-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36upx;
			color: #3E81F7;
			line-height: 54upx;
			// font-weight: bold;
			text-align: center;
		}

		&-subtitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: rgba(0, 0, 0, 0.7);
			line-height: 42upx;
			padding-bottom: 48upx;
			border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
			text-indent: 2em;
			margin-top: 20rpx;
		}

		&-main {
			margin-top: 30rpx;

			&-item {
				margin-top: 20rpx;

				&-content {
					margin-top: 10rpx;

					label {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
					}

					checkbox {
						transform: scale(0.7);
						border-radius: 50%;
					}

					radio {
						transform: scale(0.7);

					}

					input {
						width: calc(100vw - 80rpx);
						border: none;
						padding: 0 10rpx;
						border-bottom: 1px solid $border-color;
					}
				}
			}

			&-user {
				margin-top: 30rpx;

				.card-row {
					margin-top: 10rpx;
					font-size: 14px;
					color: #000000;

					>label {
						width: 180rpx;
						text-align: left;
						font-size: 28rpx;
					}

					input {
						font-size: 14px;
						padding: 0;
						flex: 1;
					}
				}
			}
		}

		.calendar-style {
			height: 35px;
			border-bottom: 1px solid $border-color;
			font-size: 13px;

			>view {
				height: 100%;

				>text {
					line-height: 35px;
				}
			}
		}
	}

	.opts {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		>* {
			width: 50%;
			flex-shrink: 0;
		}
	}
</style>